<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>

    <title>找房无忧-租房列表页</title>
    <link rel="stylesheet" href="css/reset.css"/>
    <link rel="stylesheet" href="css/SecondHandList.css"/>
    <link rel="stylesheet" href="css/rentalList.css"/>
</head>
<body>
<!--头部-->
<header>
    <h1><a href="#"><img src="image/index/logo.jpg" alt=""/></a></h1>
    <div class="icon">
        <a href="#"><img src="image/index/my.jpg" alt=""/></a>
        <a href="#"><img src="image/index/xiazai.jpg" alt=""/></a>
    </div>
</header>
<section class="rentalAddr">
    <p><strong>首页</strong> > <span>北京租房</span></p>
</section>
<!--搜索-->
<section class="secondSearch">
    <input type="search" />
    <span>|</span>
    <a href="#"><img src="image/secondhandlist/search_03.png" alt=""/></a>
</section>
<!--区域分类-->
<section class="secondList">
    <!--遮罩层-->
    <div class="hide"></div>

    <ul class="list">
        <li>
            <!--添加active类名就可以改变小箭头的方向和颜色-->
            <h2><a href="#">区域<span></span></a></h2>
        </li>
        <li>
            <h2><a href="#">月租<span></span></a></h2>
        </li>
        <li>
            <h2><a href="#">房型<span></span></a></h2>
        </li>
        <li>
            <h2><a href="#">更多<span></span></a></h2>
        </li>
    </ul>
    <ul class="someList">
        <!--区域-->
        <li class="area">
            <div class="title">
                <h2 class="active">区域</h2>
                <h2>地铁</h2>
            </div>
            <div class="hideList">
                <ul>
                    <li><a href="#">附近</a></li>
                    <li><a class="active" href="#">不限</a></li>
                </ul>
                <ul>
                    <li><a href="#">不限</a></li>
                    <li><a href="#">安贞</a></li>
                    <li><a class="active" href="#">朝阳</a></li>
                    <li><a href="#">奥林匹克公园</a></li>
                    <li><a href="#">海淀</a></li>
                    <li><a href="#">百子湾</a></li>
                    <li><a href="#">昌平</a></li>
                    <li><a href="#">北工大</a></li>
                    <li><a href="#">丰台</a></li>
                    <li><a href="#">北苑</a></li>
                    <li><a href="#">石景山</a></li>
                    <li><a href="#">CBD</a></li>
                </ul>
            </div>
        </li>
        <!--价格-->
        <li class="price">
            <ul>
                <li><a href="#">不限</a></li>
                <li><a href="#">100万以下</a></li>
                <li><a href="#">100万-150万</a></li>
                <li><a href="#">150万-200万</a></li>
                <li><a href="#">200万-250万</a></li>
                <li><a href="#">250万-300万</a></li>
                <li><a href="#">自定义价格</a></li>
            </ul>
        </li>
        <!--房型-->
        <li class="house">
            <ul>
                <li>不限</li>
                <li>
                    1室 <span></span>
                </li>
                <li>
                    2室 <span class="active"></span>
                </li>
                <li>
                    3室 <span></span>
                </li>
                <li>
                    4室 <span></span>
                </li>
                <li>
                    5室 <span></span>
                </li>
                <li><a class="btnOK" href="#">确定</a></li>
            </ul>
        </li>
        <!--更多-->
        <li class="more">
            <ul>
                <li>
                    <h3>区域</h3>
                    <ul class="childList">
                        <li>南</li>
                        <li>南北</li>
                        <li>东</li>
                        <li>西</li>
                        <li>北</li>
                    </ul>
                </li>
                <li>
                    <h3>面积（平方）</h3>
                    <ul class="childList">
                        <li>50以下</li>
                        <li>50-70</li>
                        <li>70-90</li>
                        <li>90-110</li>
                        <li>110-130</li>
                        <li>130-150</li>
                        <li>150-200</li>
                        <li>200以上</li>
                    </ul>
                </li>
                <li>
                    <h3>标签</h3>
                    <ul class="childList">
                        <li>学区房</li>
                        <li>地铁房</li>
                        <li>不限购</li>
                        <li>满两年</li>
                        <li>满五唯一</li>
                        <li>降价</li>
                        <li>新上</li>
                        <li>独家</li>
                        <li>有钥匙</li>
                    </ul>
                </li>


                <li class="clear"><a href="#">清空条件</a></li>
                <li class="btnOK"><a href="#">确定</a></li>
            </ul>
        </li>
    </ul>
</section>
<!--房屋详细信息-->
<section>
    <ul class="secondContent">
        <li>
            <div class="left">
                <img src="image/rentalList/img1.png" alt=""/>
            </div>
            <div class="right">
                <h2>南沙滩小区 超低价急售</h2>
                <p>2室1厅 96㎡ 南北</p>
                <div>青岛新天地</div>
                <div class="retalCont1"><span>集中供暖</span><strong>3700元/月</strong></div>
            </div>
        </li>
        <li>
            <div class="left">
                <img src="image/rentalList/img2.png" alt=""/>
            </div>
            <div class="right">
                <h2>青年汇二期 免税三居</h2>
                <p>3室2厅 129㎡ 南北</p>
                <div>青年汇家园</div>
                <div class="retalCont1"><span>集中供暖</span><strong>4610元/月</strong></div>
            </div>
        </li>
        <li>
            <div class="left">
                <img src="image/rentalList/img3.png" alt=""/>
            </div>
            <div class="right">
                <h2>博雅德源稀缺两居 钥匙房源</h2>
                <p>2室2厅 126m² 南北</p>
                <div>西二旗</div>
                <div class="retalCont1"><span>天然气供暖</span><strong>3420元/月</strong></div>
            </div>
        </li>
        <li>
            <div class="left">
                <img src="image/rentalList/img4.png" alt=""/>
            </div>
            <div class="right">
                <h2>朝阳北路赠车库自住首选</h2>
                <p>5室3厅 260m² 南北</p>
                <div>武夷花园二手房</div>
                <div class="retalCont1"><span>集中供暖</span><strong>5408元/月</strong></div>
            </div>
        </li>
        <li>
            <div class="left">
                <img src="image/rentalList/img5.png" alt=""/>
            </div>
            <div class="right">
                <h2>金汉旭城 东南金角一居</h2>
                <p>1室1厅 60m² 东南</p>
                <div>鲁谷二手房</div>
                <div class="retalCont1"><span>集中供暖</span><strong>3300元/月</strong></div>
            </div>
        </li>
    </ul>
</section>


<!--版权底部-->
<footer class="copyright">
    <h2>北京找房无忧 > 首页</h2>
    <div class="content">
        <ul>
            <li>
                <img src="image/index/apple.png" alt=""/>
                <div>
                    <p>iPhone</p>
                    <p>客户端</p>
                </div>
            </li>
            <li>
                <img src="image/index/android.png" alt=""/>
                <div>
                    <p>Android</p>
                    <p>客户端</p>
                </div>
            </li>
        </ul>
        <div class="text">
            <p>北京找房无忧房地产经纪公司</p>
            <p>网络经营许可证京ICP备20160812号</p>
        </div>
    </div>
</footer>

<script src="js/rem.js"></script>
<script src="js/zepto.js"></script>
<script>
    var $listLi = $('.list li');
    var $someListLi = $('.someList > li');
    $listLi.click(function () {
//        alert(1)
//        把导航条置于页面最顶端
        $('.list').css({
            'position':'fixed',
            'top':'0',
            'left':'0'
        });
//        出现透明层蒙板
        $('.hide').show();
//        定义当前元素的下标
        var index = $(this).index();
//        给导航上的a元素切换上下箭头及字体颜色
        $listLi.children('h2').children('a').removeClass('active');
        $(this).children('h2').children('a').addClass('active');

        $someListLi.hide();
//        因为区域下面使用了flex布局，不能直接用display：none隐藏，所以需要判断
        if(index === 0){
            $someListLi.eq(index).css('display', 'flex');
        } else {
            $someListLi.eq(index).show();
        }
//        阻止冒泡
        return false;
    });
    //下面的代码是点击空白区域的时候模板层消失，弹出层消失
    $someListLi.on('click', function() { return false; });

    $('body').on('click', function() {
        $('.list').css({
            'position':''
        });
        $('.hide').hide();
        $listLi.children('h2').children('a').removeClass('active');
        $someListLi.hide();
    })

</script>
</body>
</html>